<template>
	<Popup height="520rpx">
		<view class="content">
			<view class="head">
				<view class="title">
					终点选择
				</view>
				<view class="cancel" @click="saveStartProject(0)">
					取消
				</view>
			</view>
			<view class="radio-box">
				<RadioComp class="item" :info="item" :nowId="nowType" v-for="item in materialTypeList" :key="item.id"
					@click="changeMaterialType(item)" />
			</view>
			<Button3 class="save-btn" @click="saveStartProject(1)">确定</Button3>
		</view>
	</Popup>
</template>

<script setup lang="ts">
	import { ref, watchEffect } from 'vue';
	import Popup from '@/components/popup/popup.vue';
	import RadioComp from '@/components/radioComp/radioComp.vue';
	import Button3 from '@/components/button3/button3.vue';
	const emits = defineEmits(['saveStartProject'])
	const props = defineProps({
		nowProjectId: {
			type: String,
			default: '4'
		}
	})
	const materialTypeList = ref([{ projectName: '原料区', projectId: '4' }, { projectName: '成品区', projectId: '6' }])
	// 当前物料类型
	const nowType = ref(props.nowProjectId)
	watchEffect(() => {
		nowType.value = props.nowProjectId
	})
	// 改变物料类型
	const changeMaterialType = (item) => {
		nowType.value = item.projectId
	}
	// 保存物料类型
	const saveStartProject = () => {
		let nowItem = materialTypeList.value.find(item => item.projectId == nowType.value)
		emits('saveStartProject', nowItem)
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 48rpx 32rpx 68rpx;

		.head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 40rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		// .title {
		// 	margin-bottom: 42rpx;
		// 	font-size: 32rpx;
		// 	font-weight: bold;
		// }

		.radio-box {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin-bottom: 132rpx;

			.item {
				margin-bottom: 24rpx;
				min-width: 166rpx;
			}
		}
	}
</style>